<template>
  <v-row class="room-list" no-gutters>
    <v-col
      cols="12"
      sm="4"
      md="3"
      lg="3"
      v-for="room in listData"
      :key="room.id"
      class="pa-2"
    >
      <div
        class="room-item d-flex flex-column align-center pa-5"
        :class="{ 'is-official': room.room_type === 0 }"
      >
        <!-- 头像 -->
        <div class="avatar-wrapper">
          <img :src="room.avatar" />
        </div>

        <p class="official-flag" v-show="room.room_type === 0">官方</p>

        <!-- 房间名 -->
        <p class="room-name">{{ room.room_name }}</p>

        <!-- 房间信息(奖池、件数、人数) -->
        <div class="room-detail">
          <div class="room-detail-header">
            <span>奖池</span>
            <span>件数</span>
            <span>人数</span>
          </div>

          <div class="room-detail-value">
            <span style="color: #e9b10e">{{ room.prize_pool }}</span>
            <span>{{ room.prize_num }}</span>
            <span>{{ room.join_num }}</span>
          </div>
        </div>

        <!-- 饰品列表 -->
        <v-row class="room-skin-list my-3" no-gutters style="width: 100%">
          <v-col
            v-for="skin in room.main_skins"
            :key="skin.id"
            class="room-skin-item d-flex align-center"
            cols="3"
          >
            <img
              style="width: 100%;"
              :src="skin.image_url"
              alt=""
            />
          </v-col>
        </v-row>

        <!-- 加入房间按钮 -->
        <div class="room-button my-3" @click="handleClick(room.id)">
          <i class="el-icon-lock" v-if="room.is_password_room"></i>
          {{room.lottery_status === 0 ? '进入房间' : '已结束'}}
        </div>

        <!-- 开奖时间 -->
        <p class="lottery-time">
          开奖时间：{{
            $dayjs.unix(room.lottery_time).format("YYYY-MM-DD HH:mm:ss")
          }}
        </p>

        <!-- 背景图 -->
        <div
          class="room-background"
          :style="{ 'background-image': 'url(' + room.avatar + ')' }"
        ></div>
      </div>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
  },

  setup() {
    const router = useRouter();

    return {
      handleClick: (id: number) => {
        router.push(`/roll/${id}`);
      },
    };
  },
});
</script>

<style scoped lang="scss">
.room-detail-header,
.room-detail-value {
  display: flex;
  text-align: center;

  span {
    flex: 1;
  }
}

.room-item {
  width: 100%;
  height: 100%;
  background-color: #2b2c37;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: 6px;

  &:hover {
    background-color: #30313f;
  }

  &.is-official {
    .avatar-wrapper {
      img {
        border-color: #4f5175;
      }
    }
  }
}

.avatar-wrapper {
  width: 60px;
  height: 60px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid transparent;
  }
}

.room-name {
  color: #c3c3e2;
  font-size: 15px;
}

.room-detail {
  margin-top: 1rem;
  font-size: 13.6px;
  color: #848492;
  width: 100%;

  span {
    line-height: 1.5;
  }
}

.room-button {
  width: 100%;
  color: #e9b10e;
  border: 1px solid rgba(233, 177, 14, 0.5);
  border-radius: 22px;
  font-size: 14px;
  padding: 5px 15px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  max-width: 200px;
  margin: 0 auto;

  &:hover {
    border: 1px solid #e9b10e;
    background-color: rgba(233, 177, 14, 0.05);
  }
}

.room-skin-list {
  height: 60px;

  .room-skin-item {
    height: 100%;
  }
}

.lottery-time {
  font-size: 12px;
  width: 100%;
  text-align: center;
}

.room-background {
  top: -20%;
  left: 0;
  right: 0;
  width: 100%;
  filter: blur(2px);
  height: 200px;
  opacity: 0.3;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
